<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>{{ pageTitle }}</span>
        <el-button type="primary" @click="showAddDialog" class="add-btn">
          <el-icon>
            <Plus />
          </el-icon>
          {{ addButtonText }}
        </el-button>
      </div>
    </template>

    <el-form inline>
      <el-form-item label="质检单号:">
        <el-input v-model="systemNumber" placeholder="请输入质检单号" @input="loadData()" clearable></el-input>
      </el-form-item>
      <el-form-item :label="filterLabel">
        <el-select v-model="filterValue" :placeholder="filterPlaceholder" clearable filterable @change="loadData()">
          <el-option v-for="option in filterOptions" :key="option.value" :label="option.label" :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stats-card">
        <div class="stats-item">
          <span class="stats-label">总标准数:</span>
          <span class="stats-number primary">{{ totalStandards }}</span>
        </div>
        <div class="stats-item">
          <span class="stats-label">已启用:</span>
          <span class="stats-number success">{{ enabledStandards }}</span>
        </div>
        <div class="stats-item">
          <span class="stats-label">已停用:</span>
          <span class="stats-number warning">{{ disabledStandards }}</span>
        </div>
      </div>
    </div>

    <el-table :data="tableData" style="width: 100%; margin-top: 20px;" border>
      <el-table-column prop="standardId" label="质检单号"></el-table-column>
      <el-table-column prop="standardType" label="质检类型"></el-table-column>
      <el-table-column prop="standardName" label="标准名"></el-table-column>
      <el-table-column prop="itemName" label="材料类型" v-if="standardType === 'raw'"></el-table-column>
      <el-table-column prop="itemName" label="质检分类" v-if="standardType === 'finished'"></el-table-column>
      <el-table-column prop="itemName" label="所属大站" v-if="standardType === 'semi'"></el-table-column>
      <el-table-column prop="standard" label="质检指标" width="200">
        <template #default="scope">
          <div class="standards-info">
            <div>标准值: {{ scope.row.standard }}</div>
            <div>最大值: {{ scope.row.upperBound }}</div>
            <div>最小值: {{ scope.row.lowerBound }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="standardStatus" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.standardStatus === '已启用' ? 'success' : 'warning'">
            {{ scope.row.standardStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" fixed="right">
        <template #default="scope">
          <div class="operation-buttons">
            <el-button type="primary" size="small" @click="editStandard(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteStandardBox(scope.row)">删除</el-button>
            <el-button :type="scope.row.standardStatus === '已启用' ? 'warning' : 'success'" size="small"
              @click="toggleStatus(scope.row)">
              {{ scope.row.standardStatus === '已启用' ? '停用' : '启用' }}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>
  </el-card>

  <!-- 新增/编辑标准对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="900px" :close-on-click-modal="false"
    :close-on-press-escape="false" class="standard-dialog">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" class="standard-form">
      <div class="form-section">
        <div class="section-title">基本信息</div>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="标准名" prop="standardName">
              <el-input v-model="formData.standardName" placeholder="请输入标准名" :prefix-icon="Document" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="standardType === 'raw'">
            <el-form-item label="材料类型" prop="itemName">
              <el-select v-model="formData.itemName" placeholder="请选择材料类型" class="full-width">
                <el-option v-for="option in stationOptions" :key="option.value" :label="option.label"
                  :value="option.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="standardType === 'semi'">
            <el-form-item label="所属大站" prop="itemName">
              <el-select v-model="formData.itemName" placeholder="请选择所属大站" class="full-width">
                <el-option v-for="option in stationOptions" :key="option.value" :label="option.label"
                  :value="option.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="standardType === 'finished'">
            <el-form-item label="成品类型" prop="itemName">
              <el-select v-model="formData.itemName" placeholder="请选择成品类型" class="full-width">
                <el-option v-for="option in stationOptions" :key="option.value" :label="option.label"
                  :value="option.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="formData.unit" placeholder="请输入单位" :prefix-icon="Document" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质检次数" prop="inspectionCount">
              <el-select v-model="formData.inspectionCount" placeholder="请选择质检次数" class="full-width">
                <el-option label="首检" value="首检"></el-option>
                <el-option label="复检" value="复检"></el-option>
                <el-option label="终检" value="终检"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="form-section">
        <div class="section-title">质检指标</div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="标准值" prop="standard">
              <el-input v-model="formData.standard" placeholder="请输入标准值" :prefix-icon="Document" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上限" prop="upperBound">
              <el-input v-model="formData.upperBound" placeholder="请输入上限" :prefix-icon="TopRight" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下限" prop="lowerBound">
              <el-input v-model="formData.lowerBound" placeholder="请输入下限" :prefix-icon="TopRight" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button plain @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, defineProps } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Document, List, Aim, TopRight, BottomLeft } from '@element-plus/icons-vue'
import {
  queryRawMaterialStandardsService,
  querySemiFinishedStandardsService,
  queryFinishedStandardsService,
  addStandardService,
  updateStandardService,
  deleteStandardService,
  updateStandardStatusService,
  type StandardQueryDTO,
} from '@/api/ProcessEngineerApi'

// 定义props
interface Props {
  standardType: 'raw' | 'semi' | 'finished'
}

const props = defineProps<Props>()

// 根据standardType配置不同的选项
const config = computed(() => {
  switch (props.standardType) {
    case 'raw':
      return {
        pageTitle: '原材料质检标准录入',
        addButtonText: '新增原材料标准',
        dialogTitleAdd: '新增原材料标准',
        dialogTitleEdit: '编辑原材料标准',
        standardTypeText: '原材料质检',
        filterLabel: '材料类型:',
        filterPlaceholder: '材料类型',
        itemName: [
          { label: 'LED芯片', value: 'LED芯片' },
          { label: '荧光粉', value: '荧光粉' },
          { label: '封装胶', value: '封装胶' },
          { label: '支架', value: '支架' }
        ]
      }
    case 'semi':
      return {
        pageTitle: '半成品质检标准录入',
        addButtonText: '新增半成品标准',
        dialogTitleAdd: '新增半成品标准',
        dialogTitleEdit: '编辑半成品标准',
        standardTypeText: '半成品质检',
        filterLabel: '所属大站:',
        filterPlaceholder: '所属大站',
        itemName: [
          { label: '固晶', value: '固晶' },
          { label: '焊线', value: '焊线' },
          { label: '点粉', value: '点粉' },
          { label: '封装', value: '封装' }
        ]
      }
    case 'finished':
      return {
        pageTitle: '成品质检标准录入',
        addButtonText: '新增成品标准',
        dialogTitleAdd: '新增成品标准',
        dialogTitleEdit: '编辑成品标准',
        standardTypeText: '成品质检',
        filterLabel: '质检分类:',
        filterPlaceholder: '质检分类',
        itemName: [
          { label: 'LED灯泡', value: 'LED灯泡' },
          { label: 'LED灯管', value: 'LED灯管' },
          { label: 'LED面板灯', value: 'LED面板灯' },
          { label: 'LED射灯', value: 'LED射灯' },
        ]
      }
    default:
      return {}
  }
})

// 计算属性
const pageTitle = computed(() => config.value.pageTitle)
const addButtonText = computed(() => config.value.addButtonText)
const filterLabel = computed(() => config.value.filterLabel)
const filterPlaceholder = computed(() => config.value.filterPlaceholder)
const filterOptions = computed(() => config.value.itemName)
const stationOptions = computed(() => config.value.itemName)

// 响应式数据
const systemNumber = ref('')
const filterValue = ref('')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)
const formRef = ref()
const loading = ref(false)

const tableData = ref<any[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const formData = ref({
  standardId: '',
  itemName: '',
  standard: '',
  upperBound: '',
  lowerBound: '',
  unit: '',
  inspectionCount: '',
  standardName: '',
  standardType: '',
  standardStatus: '',
})

const rules = {
  standardName: [{ required: true, message: '请输入标准名', trigger: 'blur' }],
  station: [{ required: true, message: '请选择所属大站', trigger: 'change' }],
  category: [{ required: true, message: '请选择质检分类', trigger: 'change' }],
  inspectionCount: [{ required: true, message: '请选择质检次数', trigger: 'change' }],
  unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
  standard: [{ required: true, message: '请输入标准值', trigger: 'blur' }],
  upperBound: [{ required: false, message: '请输入上限', trigger: 'blur' }],
  lowerBound: [{ required: false, message: '请输入下限', trigger: 'blur' }],
  itemName: [{ required: true, message: '请选择', trigger: 'change' }]
}

// 计算统计数据
const totalStandards = computed(() => tableData.value.length)
const enabledStandards = computed(() => tableData.value.filter(item => item.standardStatus === '已启用').length)
const disabledStandards = computed(() => tableData.value.filter(item => item.standardStatus === '已停用').length)

// 获取数据的API服务
const getQueryService = () => {
  switch (props.standardType) {
    case 'raw':
      return queryRawMaterialStandardsService
    case 'semi':
      return querySemiFinishedStandardsService
    case 'finished':
      return queryFinishedStandardsService
    default:
      return queryRawMaterialStandardsService
  }
}

// 加载数据
const loadData = async () => {
  loading.value = true
  const params: StandardQueryDTO = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    standardId: systemNumber.value || undefined,
    standardType: props.standardType,
    itemName: filterValue.value || undefined
  }
  const queryService = getQueryService()
  const result = await queryService(params)
  tableData.value = result.data.records || []
  total.value = result.data.total || 0
  console.log("tableData.value", tableData.value)
}

// 搜索
const search = () => {
  currentPage.value = 1
  loadData()
}

// 重置
const reset = () => {
  systemNumber.value = ''
  filterValue.value = ''
  currentPage.value = 1
  loadData()
}

// 显示新增对话框
const showAddDialog = () => {
  dialogTitle.value = config.value.dialogTitleAdd || '新增标准'
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
}

// 编辑标准
const editStandard = (row: any) => {
  dialogTitle.value = config.value.dialogTitleEdit || '编辑标准'
  isEdit.value = true
  formData.value = {
    standardId: row.standardId || '',
    itemName: row.itemName || '',
    unit: row.unit || '',
    standard: row.standard || '',
    upperBound: row.upperBound || '',
    lowerBound: row.lowerBound || '',
    inspectionCount: row.inspectionCount || '',
    standardName: row.standardName || '',
    standardType: row.standardType || '',
    standardStatus: row.standardStatus || '',
  }
  dialogVisible.value = true
}

// 删除标准
const deleteStandard = async (row: any) => {
  let params = {
    standardStatus: row.standardStatus,
    standardId: row.standardId
  }
  const result = await deleteStandardService(params) as any
  ElMessage.success(result.msg || '删除成功')
  loadData()
}

//删除弹窗
const deleteStandardBox = async (row: any) => {
  ElMessageBox.confirm(
    '确定删除该标准吗？（删除后无法恢复，谨慎操作！）',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      //删除标准
      deleteStandard(row)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}


// 切换状态
const toggleStatus = async (row: any) => {
  console.log(row)
  let params = {
    standardStatus: row.standardStatus,
    standardId: row.standardId
  }
  const result = await updateStandardStatusService(params) as any
  ElMessage.success(result.msg || '更新成功')
  loadData()
}

// 提交表单
const submitForm = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      if(props.standardType === 'raw') {
        formData.value.standardType = '原材料'
      } else if(props.standardType === 'semi') {
        formData.value.standardType = '半成品'
      } else if(props.standardType === 'finished') {
        formData.value.standardType = '成品'
      }

      let result
      if (isEdit.value) {
        result = await updateStandardService(formData.value)
      } else {
        result = await addStandardService(formData.value)
      }
      ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
      dialogVisible.value = false
      loadData()
    }
  })
}

// 重置表单
const resetForm = () => {
  formData.value = {
    standardId: '',
    itemName: '',
    standard: '',
    upperBound: '',
    lowerBound: '',
    unit: '',
    inspectionCount: '',
    standardName: '',
    standardType: props.standardType,
    standardStatus: '',
  }
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadData()
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
/* 页面容器样式 */
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: all 0.3s ease;
  overflow: hidden;

  /* 页面头部样式 */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 18px 24px;
    border-radius: 12px 12px 0 0;
    margin: -20px -20px 24px -20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
      opacity: 0.6;
      transform: rotate(30deg);
      pointer-events: none;
    }

    .add-btn {
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      font-weight: 500;
      padding: 10px 20px;
      border-radius: 6px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;

      &:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }

  /* 表单样式优化 */
  :deep(.el-form) {
    background: #f9fafc;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 24px;

    .el-form-item {
      margin-bottom: 0;
      margin-right: 16px;
    }

    .el-input__wrapper,
    .el-select__wrapper {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }
    }

    .el-button {
      padding: 10px 20px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}

/* 统计信息卡片样式 */
.stats-section {
  margin: 24px 0;

  .stats-card {
    display: flex;
    gap: 40px;
    padding: 24px;
    background: linear-gradient(135deg, #f6f9fc 0%, #eef2f7 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #3a7bd5, #00d2ff);
    }

    .stats-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 0 20px;

      &:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -20px;
        top: 10%;
        height: 80%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);
      }

      .stats-label {
        font-size: 15px;
        color: #5e6c84;
        margin-bottom: 10px;
        font-weight: 500;
      }

      .stats-number {
        font-size: 28px;
        font-weight: bold;
        transition: all 0.3s ease;

        &.primary {
          color: #3a7bd5;
          text-shadow: 0 2px 4px rgba(58, 123, 213, 0.2);
        }

        &.success {
          color: #36b37e;
          text-shadow: 0 2px 4px rgba(54, 179, 126, 0.2);
        }

        &.warning {
          color: #ff9f43;
          text-shadow: 0 2px 4px rgba(255, 159, 67, 0.2);
        }
      }
    }
  }
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  .el-table__header-wrapper {
    th {
      background: #f0f5ff;
      color: #3a7bd5;
      font-weight: 600;
      padding: 12px 0;
    }
  }

  .el-table__row {
    transition: all 0.2s ease;

    &:hover {
      background-color: #f6f9fc !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    td {
      padding: 12px 0;
    }
  }

  .el-button {
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 6px 12px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
}

/* 质检指标信息样式 */
.standards-info {
  font-size: 13px;
  line-height: 1.5;
  background: #f9fafc;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #3a7bd5;

  div {
    margin-bottom: 4px;
    display: flex;
    align-items: center;

    &:before {
      content: '•';
      color: #3a7bd5;
      margin-right: 5px;
      font-weight: bold;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

/* 分页控件样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding: 16px 0;

  :deep(.el-pagination) {
    padding: 12px 24px;
    background: #f9fafc;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    .el-pagination__sizes,
    .el-pagination__jump {
      margin-left: 16px;
    }

    button {
      background: transparent;

      &:hover {
        color: #3a7bd5;
      }

      &:disabled {
        background: transparent;
      }
    }

    .el-pager li {
      background: transparent;
      transition: all 0.3s ease;

      &.is-active {
        background: #3a7bd5;
        color: white;
        font-weight: bold;
      }

      &:hover:not(.is-active) {
        color: #3a7bd5;
      }
    }
  }
}

/* 对话框底部按钮样式 */
.dialog-footer {
  text-align: right;

  :deep(.el-button) {
    padding: 10px 24px;
    transition: all 0.3s ease;
    border-radius: 6px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}

/* 表格操作按钮样式 */
.operation-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;

  .el-button {
    margin: 0;
    padding: 6px 8px;
    min-width: 0;
    font-size: 12px;
    border-radius: 4px;
    transition: all 0.25s ease;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }

    &:active {
      transform: scale(0.98);
    }
  }
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  .el-dialog__header {
    background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
    padding: 20px 24px;
    margin-right: 0;

    .el-dialog__title {
      color: white;
      font-weight: 600;
      font-size: 18px;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;

      .el-dialog__close {
        color: rgba(255, 255, 255, 0.9);

        &:hover {
          color: white;
        }
      }
    }
  }

  .el-dialog__body {
    padding: 24px;
  }

  .el-dialog__footer {
    padding: 16px 24px 24px;
    border-top: 1px solid #ebeef5;
  }
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;

  .el-table__header {
    background: #f8f9fa;
  }

  .el-table__row:hover {
    background: #f5f7fa;
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-button) {
  border-radius: 6px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 新增标准窗口样式 */
.standard-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 24px;
  }

  .standard-form {
    .form-section {
      margin-bottom: 24px;
      background-color: #f9fafc;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #409EFF;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e0e6ed;
        position: relative;

        &:before {
          content: '';
          position: absolute;
          left: 0;
          bottom: -1px;
          width: 50px;
          height: 2px;
          background: linear-gradient(90deg, #409EFF, #79bbff);
        }
      }

      .el-row {
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    :deep(.el-input__wrapper),
    :deep(.el-select__wrapper) {
      box-shadow: 0 0 0 1px #dcdfe6 inset;
      transition: all 0.2s ease;

      &:hover {
        box-shadow: 0 0 0 1px #c0c4cc inset;
      }

      &.is-focus {
        box-shadow: 0 0 0 1px #409EFF inset;
      }
    }

    :deep(.el-input__prefix) {
      color: #909399;
    }
  }

  .full-width {
    width: 100%;
  }

  :deep(.el-form-item) {
    margin-bottom: 18px;
  }
}
</style>